<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>项目统计</span>
        </div>
      </template>
      <div style="width: 100%; text-align: center; margin-bottom: 20px">
        选择年份：
        <el-select v-model="year" class="m-2" placeholder="Select" size="large" style="width: 140px" @change="fetchData">
          <el-option v-for="item in years" :key="item.year" :value="item.year" />
        </el-select>
      </div>
      <el-table :data="tableData" border show-summary style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column prop="department_name" label="部门" width="180" />
        <el-table-column prop="product_count" label="项目数量" sortable />
        <el-table-column prop="haibao" label="海报设计" sortable />
        <el-table-column prop="changtu" label="长图" sortable />
        <el-table-column prop="h5" label="H5设计" sortable />
        <el-table-column prop="shipin" label="视频制作" sortable />
        <el-table-column prop="ziyuan" label="资源图" sortable />
        <el-table-column prop="chahua" label="插画" sortable />
        <el-table-column prop="donghua" label="动画" sortable />
        <el-table-column prop="ppt" label="PPT、杂志" sortable />
        <el-table-column prop="wuliao" label="物料" sortable />
        <el-table-column prop="money" label="经营" sortable />
      </el-table>
      <div id="chart" style="width: 100%; height: 400px; margin-top: 30px;"></div>
    </el-card>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import workApi from '../../api/work';

const tableData = ref([]);
const totalRow = reactive({
  department_name: '全部',
  product_count: 0,
  haibao: 0,
  changtu: 0,
  h5: 0,
  shipin: 0,
  ziyuan: 0,
  chahua: 0,
  donghua: 0,
  ppt: 0,
  wuliao: 0,
  money: 0,
});
const year = ref();
const years = ref();
let chartInstance = null;

onMounted(async () => {
  const yearRes = await workApi.getDistinctYears();
  years.value = yearRes.data;

  const currentYear = new Date().getFullYear();
  year.value = currentYear;

  await fetchData();

  initChart();
  updateChart();
});

const fetchData = async () => {
  const data = { year: year.value };
  const res = await workApi.getCount(data);
  tableData.value = Object.assign([], res.data);

  calculateTotal();
  updateChart();
};

const calculateTotal = () => {
  Object.keys(totalRow).forEach((key) => {
    if (key !== 'department_name') {
      totalRow[key] = tableData.value.reduce((sum, item) => sum + (item[key] || 0), 0);
    }
  });
};

const initChart = () => {
  const chartDom = document.getElementById('chart');
  chartInstance = echarts.init(chartDom);
};

const updateChart = () => {
  if (!chartInstance) return;

  const option = {
    title: {
      text: `创意设计中心项目统计图(${year.value}年)`,
      subtext: '总计：' + totalRow.product_count + '个项目',
      left: 'center',
    },
    subtextStyle: {
      fontSize: 16, // 子标题字体大小
      color: '#666', // 子标题颜色
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      bottom: '10%',
      left: 'center',
    },
    series: [
      {
        name: '项目分类',
        type: 'pie',
        radius: '50%',
        label: {
          show: true,
          formatter: '{b}: {c}',
        },
        data: [
          { value: totalRow.haibao, name: '海报设计' },
          { value: totalRow.changtu, name: '长图' },
          { value: totalRow.h5, name: 'H5设计' },
          { value: totalRow.shipin, name: '视频制作' },
          { value: totalRow.ziyuan, name: '资源图' },
          { value: totalRow.chahua, name: '插画' },
          { value: totalRow.donghua, name: '动画' },
          { value: totalRow.ppt, name: 'PPT、杂志' },
          { value: totalRow.wuliao, name: '物料' },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  };

  chartInstance.setOption(option);
};

const tableRowClassName = (row) => {
  if (row.row.department_name === '全部') {
    return 'warning-row';
  }
  return '';
};
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-table .cell {
  text-align: center;
  line-height: 100%;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 100%;
}

.time {
  font-size: 12px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-row {
  padding-bottom: 60px;
}

.el-col {
  width: 200px;
  height: 300px;
  margin: 5px;
}

.el-col-24 {
  flex: none;
}

.el-col .image {
  padding: 20px;
  width: 80%;
}

.el-col video {
  width: 100%;
}
</style>


